<template>
  <el-header>
    <!-- 图标的展示 -->
    <el-button size="small" @click="HandleCollapse">
      <el-icon :size="20">
        <Menu />
      </el-icon>
    </el-button>
    <el-breadcrumb :separator-icon="ArrowRight" style="margin-left: 30px;" >
      <el-breadcrumb-item :to="{ path: '/user' }" >首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:this.$route.path}">{{ this.$route.meta.name }}</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="flex: 1;width: 0;display: flex;align-items: center;justify-content: flex-end;">
      <el-dropdown placement="bottom">
        <img :src="user.avatar" style="width: 50px;height: auto; border-radius: 50%;" alt="">
        <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="this.$router.push('/info')">个人信息</el-dropdown-item>
          <el-dropdown-item @click="this.$router.push('/password')" >修改密码</el-dropdown-item>
          <el-dropdown-item @click="layout()" >退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
      </el-dropdown>
    </div>
  </el-header>
</template>

<script>
export default {
  data() {
    return{
      user: JSON.parse(localStorage.getItem("user")),
    }
  },
  components:{
  },
  methods: {
    HandleCollapse() {
      this.$store.commit("updateIsCollapse");
    },
    layout(){
      localStorage.removeItem("user");
      //跳转到登录界面
      this.$router.push('/');
    }
  },
};
</script>

<style>
.el-header {
  display: flex;
  align-items: center;
  margin-top: -8px;
  width: 100%;
  background: #333;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
}
.el-breadcrumb .el-breadcrumb__inner {
        color:white;

}


</style>